.codepen-wrapper[data-codepen-id="qBcpw"] * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.codepen-wrapper[data-codepen-id="qBcpw"] body {
position: relative;
background: #c4a1a9;
padding: 40px 0;
text-align: center;
overflow: hidden;
}

.codepen-wrapper[data-codepen-id="qBcpw"] #r8 {
position: relative;
display: inline-block;
z-index: 0;
width: 291px;
height: 88px;
overflow: hidden;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .body {
position: absolute;
overflow: hidden;
z-index: 5;
top: 0;
left: 0;
width: 291px;
height: 75px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .top,
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .bottom {
position: absolute;
background: #a6c3cb;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .top {
-moz-border-radius-topleft: 205px 65px;
-webkit-border-top-left-radius: 205px 65px;
border-top-left-radius: 205px 65px;
top: 23px;
left: 3px;
width: 80px;
height: 40px;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .top:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: -3px -3px 0 0 #a6c3cb, 1px -2px 0 0 #c5d8dc;
-webkit-box-shadow: -3px -3px 0 0 #a6c3cb, 1px -2px 0 0 #c5d8dc;
box-shadow: -3px -3px 0 0 #a6c3cb, 1px -2px 0 0 #c5d8dc;
content: " ";
position: absolute;
top: 9px;
left: 26px;
width: 51px;
height: 20px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .bottom {
top: 61px;
left: 3px;
width: 22px;
height: 8px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .bottom:before {
content: " ";
position: absolute;
top: 3px;
left: -3px;
border-style: solid;
border-color: transparent #a6c3cb transparent transparent;
border-width: 3px 3px 2px 0;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .bottom:after {
content: " ";
position: absolute;
top: 8px;
left: 0;
border-style: solid;
border-color: #a6c3cb #a6c3cb transparent transparent;
border-width: 0 22px 8px 0;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .lights {
-moz-border-radius-topleft: 34px 30px;
-webkit-border-top-left-radius: 34px 30px;
border-top-left-radius: 34px 30px;
-moz-box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -17px 0 0 #010207;
-webkit-box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -17px 0 0 #010207;
box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -17px 0 0 #010207;
position: absolute;
background: #e5e6e8;
overflow: hidden;
z-index: 20;
top: 37px;
left: 5px;
width: 16px;
height: 24px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .lights:before {
-moz-border-radius-topleft: 50%;
-webkit-border-top-left-radius: 50%;
border-top-left-radius: 50%;
content: " ";
position: absolute;
background: #a7c2cb;
top: 0;
left: 12px;
width: 20px;
height: 30px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .hood .lights:after {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 7px 24px 0 0 #a7c2cb;
-webkit-box-shadow: 7px 24px 0 0 #a7c2cb;
box-shadow: 7px 24px 0 0 #a7c2cb;
content: " ";
position: absolute;
top: -6px;
left: -6px;
width: 20px;
height: 30px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .top .front,
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .top .center,
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .top .rear {
position: absolute;
background: #a6c3cb;
overflow: hidden;
top: 0;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .top .front {
-moz-border-radius-topleft: 115px 50px;
-webkit-border-top-left-radius: 115px 50px;
border-top-left-radius: 115px 50px;
left: 64px;
width: 90px;
height: 67px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .top .center {
-moz-border-radius-topright: 185px 22px;
-webkit-border-top-right-radius: 185px 22px;
border-top-right-radius: 185px 22px;
left: 151px;
width: 30px;
height: 67px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .top .rear {
position: relative;
background: none;
border-style: solid;
border-color: transparent transparent transparent #a6c3cb;
border-width: 14px 0 0 61px;
overflow: visible;
top: 5px;
left: 181px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .top .rear:before {
content: " ";
position: absolute;
background: #a6c3cb;
display: block;
top: 0;
left: -61px;
width: 61px;
height: 42px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .windows {
position: absolute;
overflow: hidden;
top: 5px;
left: 40px;
width: 161px;
height: 19px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .windows .front {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: -10px 0 0 0 #000207;
-webkit-box-shadow: -10px 0 0 0 #000207;
box-shadow: -10px 0 0 0 #000207;
position: absolute;
background: transparent;
top: -2px;
left: -4px;
width: 220px;
height: 200px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .windows .front:after {
content: " ";
position: absolute;
top: 0;
left: 57px;
border-style: solid;
border-color: transparent #a5c2ca transparent transparent;
border-width: 0 20px 10px 13px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .windows .center {
-moz-border-radius: 50% 75% 0 0;
-webkit-border-radius: 50%;
border-radius: 50% 75% 0 0;
-moz-box-shadow: inset -91px -127px 0px #2a2f33;
-webkit-box-shadow: inset -91px -127px 0px #2a2f33;
box-shadow: inset -91px -127px 0px #2a2f33;
position: absolute;
background: #010207;
overflow: hidden;
top: 2px;
left: 15px;
width: 220px;
height: 200px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .windows .center:before {
content: " ";
position: absolute;
z-index: 10;
top: 14px;
left: 37px;
border-style: solid;
border-color: transparent transparent #a6c3cb transparent;
border-width: 0 0 3px 92px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .windows .center:after {
content: " ";
position: absolute;
z-index: 20;
top: 3px;
left: 122px;
border-style: solid;
border-color: transparent transparent #2a2f33 transparent;
border-width: 0 0 14px 10px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .door {
-moz-border-radius-bottomright: 30px 37px;
-webkit-border-bottom-right-radius: 30px 37px;
border-bottom-right-radius: 30px 37px;
position: absolute;
z-index: 10;
top: 24px;
left: 154px;
width: 51px;
height: 35px;
border-style: solid;
border-color: transparent transparent #2a2f33 transparent;
border-width: 0 0 35px 23px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .door:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
background: #2a2f33;
top: -5px;
left: 17px;
width: 11px;
height: 11px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .door:after {
-moz-border-radius: 0 0 90% 0;
-webkit-border-radius: 0;
border-radius: 0 0 90% 0;
-moz-box-shadow: 0 3px 0 0 #a6c3cb;
-webkit-box-shadow: 0 3px 0 0 #a6c3cb;
box-shadow: 0 3px 0 0 #a6c3cb;
content: " ";
position: absolute;
background: transparent;
top: 15px;
left: -23px;
width: 47px;
height: 20px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .mirror {
-moz-border-radius-bottomright: 20%;
-webkit-border-bottom-right-radius: 20%;
border-bottom-right-radius: 20%;
-moz-border-radius-bottomleft: 90% 50%;
-webkit-border-bottom-left-radius: 90% 50%;
border-bottom-left-radius: 90% 50%;
position: absolute;
z-index: 40;
top: 23px;
left: 93px;
width: 0;
height: 8px;
border-left: solid 3px #8cb1ba;
border-right: solid 3px #749398;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .mirror:after {
-moz-border-radius-topleft: 90% 50%;
-webkit-border-top-left-radius: 90% 50%;
border-top-left-radius: 90% 50%;
-moz-border-radius-topright: 20%;
-webkit-border-top-right-radius: 20%;
border-top-right-radius: 20%;
-moz-border-radius-bottomright: 20%;
-webkit-border-bottom-right-radius: 20%;
border-bottom-right-radius: 20%;
-moz-border-radius-bottomleft: 90% 50%;
-webkit-border-bottom-left-radius: 90% 50%;
border-bottom-left-radius: 90% 50%;
-moz-box-shadow: inset -1px 0 0 0 #a6c3cb, inset 2px 0 0 0 #a6c3cb, inset 0 -1px 0 0 #a6c3cb, inset 0 -3px 0 0 #8bb1ba;
-webkit-box-shadow: inset -1px 0 0 0 #a6c3cb, inset 2px 0 0 0 #a6c3cb, inset 0 -1px 0 0 #a6c3cb, inset 0 -3px 0 0 #8bb1ba;
box-shadow: inset -1px 0 0 0 #a6c3cb, inset 2px 0 0 0 #a6c3cb, inset 0 -1px 0 0 #a6c3cb, inset 0 -3px 0 0 #8bb1ba;
content: " ";
position: absolute;
background: #a6c3cb;
border: solid 1px #8bb1ba;
top: -8px;
left: -5px;
width: 11px;
height: 10px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .shine .door-top {
position: absolute;
z-index: 5;
top: 25px;
left: 94px;
width: 83px;
height: 4px;
border-style: solid;
border-color: transparent transparent #b9ced1 transparent;
border-width: 0 0 4px 83px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .shine .door-center {
position: absolute;
overflow: hidden;
z-index: 5;
top: 33px;
left: 120px;
width: 72px;
height: 12px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .shine .door-center:before {
content: " ";
position: absolute;
top: 0;
left: 0;
border-style: solid;
border-color: transparent transparent #829fa5 transparent;
border-width: 0 0 4px 72px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .shine .door-center:after {
-moz-border-radius-topright: 100%;
-webkit-border-top-right-radius: 100%;
border-top-right-radius: 100%;
-moz-box-shadow: 20px -1px 0 0 #829fa5;
-webkit-box-shadow: 20px -1px 0 0 #829fa5;
box-shadow: 20px -1px 0 0 #829fa5;
content: " ";
position: absolute;
background: transparent;
top: 4px;
left: 0;
width: 44px;
height: 5px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .shine .door-bottom {
-moz-border-radius-topleft: 200% 200%;
-webkit-border-top-left-radius: 200% 200%;
border-top-left-radius: 200% 200%;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
background: #94bdc3;
border-top: solid 3px #c6d8da;
border-left: solid 3px #c6d8da;
top: 46px;
left: 85px;
width: 84px;
height: 18px;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .shine .door-bottom:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-width: 0 0 8px 100px;
border-color: transparent transparent #a6c3cb transparent;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .shine .door-dark {
position: absolute;
z-index: 20;
height: 4px;
top: 25px;
left: 177px;
border-style: solid;
border-width: 1px 25px 1px 0;
border-color: transparent #505558 transparent transparent;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .top,
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .bottom {
position: absolute;
background: #a6c3cb;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .top {
-moz-border-radius-topright: 25px 40px;
-webkit-border-top-right-radius: 25px 40px;
border-top-right-radius: 25px 40px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
top: 20px;
left: 242px;
width: 42px;
height: 40px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .top:before {
content: " ";
position: absolute;
top: -6px;
left: -21px;
border-style: solid;
border-color: transparent transparent transparent #a6c3cb;
border-width: 6px 0 0 45px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .bottom {
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
top: 60px;
left: 260px;
width: 24px;
height: 10px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .bottom:after {
content: " ";
position: absolute;
top: 9px;
left: 0;
border-style: solid;
border-color: transparent transparent transparent #a6c3cb;
border-width: 0 0 12px 22px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .lights {
-moz-border-radius-topright: 25px 40px;
-webkit-border-top-right-radius: 25px 40px;
border-top-right-radius: 25px 40px;
-moz-box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -16px 0 0 #010207, inset 0 -17px 0 0 #33383c, inset 0 -20px 0 0 #010207;
-webkit-box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -16px 0 0 #010207, inset 0 -17px 0 0 #33383c, inset 0 -20px 0 0 #010207;
box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -16px 0 0 #010207, inset 0 -17px 0 0 #33383c, inset 0 -20px 0 0 #010207;
position: absolute;
background: #e1417f;
top: 23px;
right: 8px;
width: 17px;
height: 26px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .lights:before {
-moz-border-radius-topright: 100% 80%;
-webkit-border-top-right-radius: 100% 80%;
border-top-right-radius: 100% 80%;
-moz-box-shadow: inset 0 2px 0 0 #a6c3cb, inset 0 -12px 0 0 #a6c3cb, inset -2px 0 0 0 #a6c3cb, inset -3px 0 0 0 #c6d8da;
-webkit-box-shadow: inset 0 2px 0 0 #a6c3cb, inset 0 -12px 0 0 #a6c3cb, inset -2px 0 0 0 #a6c3cb, inset -3px 0 0 0 #c6d8da;
box-shadow: inset 0 2px 0 0 #a6c3cb, inset 0 -12px 0 0 #a6c3cb, inset -2px 0 0 0 #a6c3cb, inset -3px 0 0 0 #c6d8da;
content: " ";
position: absolute;
background: #a6c3cb;
top: 0;
left: -10px;
width: 20px;
height: 37px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .trunk .lights:after {
content: " ";
position: absolute;
top: 0;
left: -15px;
border-style: solid;
border-color: #a6c3cb transparent transparent transparent;
border-width: 10px 10px 0 10px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel-socket .front,
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel-socket .rear {
position: absolute;
background: #010005;
z-index: 1000;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel-socket .front {
-moz-border-radius: 50% 50% 0 50%;
-webkit-border-radius: 50%;
border-radius: 50% 50% 0 50%;
-moz-box-shadow: 0 0 0 2px #a6c3cb, 0 -2px 0 3px #bfd4d9;
-webkit-box-shadow: 0 0 0 2px #a6c3cb, 0 -2px 0 3px #bfd4d9;
box-shadow: 0 0 0 2px #a6c3cb, 0 -2px 0 3px #bfd4d9;
top: 37px;
left: 25px;
width: 51px;
height: 51px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel-socket .rear {
-moz-border-radius: 50% 50% 50% 0;
-webkit-border-radius: 50%;
border-radius: 50% 50% 50% 0;
-moz-box-shadow: 0 0 0 3px #a6c3cb, 0 -3px 0 3px #bfd4d9, 0 -3px 0 8px #a6c3cb, 0 -8px 0 5px #c6d8da;
-webkit-box-shadow: 0 0 0 3px #a6c3cb, 0 -3px 0 3px #bfd4d9, 0 -3px 0 8px #a6c3cb, 0 -8px 0 5px #c6d8da;
box-shadow: 0 0 0 3px #a6c3cb, 0 -3px 0 3px #bfd4d9, 0 -3px 0 8px #a6c3cb, 0 -8px 0 5px #c6d8da;
top: 34px;
left: 210px;
width: 57px;
height: 57px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .kit .front {
position: absolute;
top: 67px;
left: 4px;
border-style: solid;
border-color: #8cb1ba #8cb1ba transparent transparent;
border-width: 0 20px 6px 0;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .kit .front:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
background: #c6d8da;
width: 13px;
height: 2px;
top: -5px;
left: 4px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .kit .center {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
position: absolute;
background: #a6c3cb;
border: solid 2px #a6c3cb;
border-right-width: 4px;
overflow: hidden;
left: 76px;
bottom: 0;
width: 134px;
height: 22px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .kit .center:before {
content: " ";
position: absolute;
right: 0;
bottom: 0;
border-style: solid;
border-color: transparent #8cb1ba transparent transparent;
border-width: 8px 263px 0 0;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .kit .rear {
-moz-border-radius-bottomright: 40px;
-webkit-border-bottom-right-radius: 40px;
border-bottom-right-radius: 40px;
position: absolute;
background: #8cb1ba;
overflow: hidden;
left: 250px;
bottom: 2px;
width: 28px;
height: 11px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: absolute;
border: solid 3px #282c2d;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel > span {
position: absolute;
display: block;
z-index: 10;
top: 50%;
right: 50%;
margin-top: -2px;
margin-right: 4px;
width: 13px;
height: 5px;
border-top: solid 2px #cbdeef;
border-bottom: solid 2px #cbdeef;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel > span:first-child + * {
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform: rotate(72deg);
margin-top: -13px;
margin-right: -3px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel > span:first-child + * + * {
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
margin-top: -9px;
margin-right: -15px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel > span:first-child + * + * + * {
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-webkit-transform: rotate(216deg);
transform: rotate(216deg);
margin-top: 4px;
margin-right: -16px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel > span:first-child + * + * + * + * {
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-webkit-transform: rotate(288deg);
transform: rotate(288deg);
margin-top: 8px;
margin-right: -3px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel.front {
-moz-box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 10px #090a0e, inset 0 0 0 13px #000004, inset 0 0 0 16px #cadcf0, inset 0 0 0 17px #90a1b1, inset 0 0 0 23px #c9def1;
-webkit-box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 10px #090a0e, inset 0 0 0 13px #000004, inset 0 0 0 16px #cadcf0, inset 0 0 0 17px #90a1b1, inset 0 0 0 23px #c9def1;
box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 10px #090a0e, inset 0 0 0 13px #000004, inset 0 0 0 16px #cadcf0, inset 0 0 0 17px #90a1b1, inset 0 0 0 23px #c9def1;
top: 40px;
left: 28px;
width: 44px;
height: 44px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .wheel.rear {
-moz-box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 12px #090a0e, inset 0 0 0 15px #000004, inset 0 0 0 18px #cadcf0, inset 0 0 0 19px #90a1b1, inset 0 0 0 23px #c9def1;
-webkit-box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 12px #090a0e, inset 0 0 0 15px #000004, inset 0 0 0 18px #cadcf0, inset 0 0 0 19px #90a1b1, inset 0 0 0 23px #c9def1;
box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 12px #090a0e, inset 0 0 0 15px #000004, inset 0 0 0 18px #cadcf0, inset 0 0 0 19px #90a1b1, inset 0 0 0 23px #c9def1;
top: 38px;
left: 215px;
width: 47px;
height: 47px;
}
.codepen-wrapper[data-codepen-id="qBcpw"] #r8 .shadow {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: absolute;
background: #010207;
z-index: 0;
left: 0;
bottom: 0;
width: 291px;
height: 22px;
}

/* The animation part ;) */
.codepen-wrapper[data-codepen-id="qBcpw"] .wheel {
-webkit-animation: wheels-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-moz-animation: wheels-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-o-animation: wheels-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92);
animation: wheels-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-moz-transform-origin: 50% 50% 0 50%;
-ms-transform-origin: 50% 50% 0 50%;
-webkit-transform-origin: 50% 50% 0 50%;
transform-origin: 50% 50% 0 50%;
}

.codepen-wrapper[data-codepen-id="qBcpw"] .body {
-webkit-animation: body-animation 1.2s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-moz-animation: body-animation 1.2s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-o-animation: body-animation 1.2s cubic-bezier(0.44, 0.33, 0.46, 0.92);
animation: body-animation 1.2s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-moz-transform-origin: 82% 83% 0 50%;
-ms-transform-origin: 82% 83% 0 50%;
-webkit-transform-origin: 82% 83% 0 50%;
transform-origin: 82% 83% 0 50%;
}

.codepen-wrapper[data-codepen-id="qBcpw"] .trunk .lights {
-webkit-animation: lights-animation 1s ease-in-out infinite alternate;
-moz-animation: lights-animation 1s ease-in-out infinite alternate;
-o-animation: lights-animation 1s ease-in-out infinite alternate;
animation: lights-animation 1s ease-in-out infinite alternate;
}

.codepen-wrapper[data-codepen-id="qBcpw"] #r8 {
-webkit-animation: r8-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-moz-animation: r8-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-o-animation: r8-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92);
animation: r8-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92);
-moz-transform-origin: 50% 50% 0 50%;
-ms-transform-origin: 50% 50% 0 50%;
-webkit-transform-origin: 50% 50% 0 50%;
transform-origin: 50% 50% 0 50%;
}

@-webkit-keyframes wheels-animation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-720deg);
-ms-transform: rotate(-720deg);
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg);
}
}
@-moz-keyframes wheels-animation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-720deg);
-ms-transform: rotate(-720deg);
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg);
}
}
@-o-keyframes wheels-animation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-720deg);
-ms-transform: rotate(-720deg);
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg);
}
}
@keyframes wheels-animation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-720deg);
-ms-transform: rotate(-720deg);
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg);
}
}
@-webkit-keyframes body-animation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-moz-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes body-animation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-moz-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-o-keyframes body-animation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-moz-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes body-animation {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
85% {
-moz-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes lights-animation {
0% {
background: #b01329;
}
20% {
background: #b01329;
}
80% {
background: #e3407f;
}
100% {
background: #e3407f;
}
}
@-moz-keyframes lights-animation {
0% {
background: #b01329;
}
20% {
background: #b01329;
}
80% {
background: #e3407f;
}
100% {
background: #e3407f;
}
}
@-o-keyframes lights-animation {
0% {
background: #b01329;
}
20% {
background: #b01329;
}
80% {
background: #e3407f;
}
100% {
background: #e3407f;
}
}
@keyframes lights-animation {
0% {
background: #b01329;
}
20% {
background: #b01329;
}
80% {
background: #e3407f;
}
100% {
background: #e3407f;
}
}
@-webkit-keyframes r8-animation {
0% {
-moz-transform: translateX(1000px);
-ms-transform: translateX(1000px);
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-moz-keyframes r8-animation {
0% {
-moz-transform: translateX(1000px);
-ms-transform: translateX(1000px);
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-o-keyframes r8-animation {
0% {
-moz-transform: translateX(1000px);
-ms-transform: translateX(1000px);
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes r8-animation {
0% {
-moz-transform: translateX(1000px);
-ms-transform: translateX(1000px);
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}